<template>
<!--登录窗口-->
  <div class="mainDiv" >
    <h1>门诊电子病历管理系统</h1>
    <el-card v-if="loginShow" style="max-width: 480px; margin: 0 auto;
    margin-top: 8%;  border-radius: 10px;
    background-color: rgba(255, 2555, 2555, 0.95);
    font-weight: bold;">
      <template #header>
        <div>
          <span style="font-weight: bold; font-size: 30px; display: flex;
          justify-content: center; align-items: center;">登录</span>
        </div>
      </template>
      <el-form label-width="auto" >
        <el-form-item label="账号" prop="phone">
          <el-input placeholder="请输入手机号码" clearable v-model="loginFrom.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" type="password" show-password clearable v-model="loginFrom.password"> </el-input>
        </el-form-item>
        <el-form-item label="身份">
          <el-select placeholder="选择身份" v-model="loginFrom.sole">
            <el-option label="管理员" value="10"></el-option>
            <el-option label="医生" value="20"></el-option>
            <el-option label="患者" value="30"></el-option>
          </el-select>
        </el-form-item>
        <span style="display: flex; align-items: center;">
      <router-link to="/login" style="color: green; text-decoration: none;
      font-size: 15px; margin-left: auto;">忘记密码</router-link>
    </span>
      </el-form>
      <template #footer >
        <el-row>
          <el-col :span="8"><el-button @click="login" type="primary" style="width: 100%;">立即登录</el-button></el-col>
          <el-col :span="8"/>
          <el-col :span="8"><el-button @click="SignUpNow" type="success" style="width: 100%;">立即注册</el-button></el-col>
        </el-row>
      </template>
    </el-card>
    <!-- 注册窗口 -->
    <el-card v-if="regShow" style="max-width: 480px;margin: 0 auto;margin-top:3%;
    border-radius: 10px; background-color: rgba(255,2555,2555,0.95);">
      <template #header>
        <div style="align-items: center">
          <span style="font-weight: bold; font-size: 20px">注册账号</span>
          <el-button @click="back" type="success" style="position: relative; left: 70%">返回</el-button>
        </div>
      </template>
      <el-form :model="regFrom" label-width="auto" ref="ruleFormRef">
        <el-form-item label="账号" prop="phone">
          <el-input v-model="regFrom.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="patientPassword">
          <el-input v-model="regFrom.patientPassword" type="password" show-password clearable placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="名字" prop="patientName">
          <el-input  v-model="regFrom.patientName"placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item  label="身份证号" prop="cardId">
          <el-input v-model="regFrom.cardId" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item  label="年龄" prop="age">
          <el-input v-model="regFrom.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="regFrom.gender">
            <el-radio label="1" border style="margin-right: 10px;font-weight: bold">男</el-radio>
            <el-radio label="0" border style="font-weight: bold;">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item  label="住址" prop="address">
          <el-input v-model="regFrom.address" placeholder="请输入地址省、县即可"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="reg" type="primary" style="width: 100%;">立即注册</el-button>
    </el-card>
  </div>
</template>
<script setup>
/*导入相关依赖*/
import {ref} from "vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
/*定义一个loginFrom数组来接收用户输入的数据*/
const loginFrom = ref({
  phone:'',
  password:'',
  sole:'20'
})
/*定义一个user来保存来自后端发过来的数据*/
const user =ref({});
/*定义一个注册表regFrom数组来存放用户注册的数据的*/
const regFrom = ref({
  patientName:'',
  patientPassword:'',
  cardId:'',
  phone:'',
  address:'',
  gender:'',
  age:'',
})
//定义登录方法
const login = () => {
  axios.post(BASE_URL+'/v1/user/login',loginFrom.value)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('登录成功')
          /*接收后端发过来的数据*/
          user.value = response.data.data;
          localStorage.setItem('user',JSON.stringify(response.data.data));
          if(user.value.sole == 10){
            router.push('/admin')
          }else if (user.value.sole == 20){
            router.push('/medicalTreatment')
          }else if (user.value.sole == 30){
            router.push('/registered')
          }
          empty();
        }else {
          ElMessage.error(response.data.msg)
        }
      })
  console.log(loginFrom.value);
}
/*定义清空数据的方法*/
const empty = () => {
  loginFrom.value = '';
  user.value = '';
  regFrom.value='';
}
//定义一个登录的默认值
const loginShow =ref(true);
//定义一个注册的默认值
const  regShow = ref(false);
//定义注册方法
const reg = () => {
  let data = qs.stringify(regFrom.value)
  axios.post(BASE_URL+'/v1/user/reg',data)
      .then((response)=>{
        if (response.data.code == 2000){
          ElMessage.success('注册成功');
          /*注册成功后关闭注册窗口并打开登录窗口*/
          regShow.value = false;
          loginShow.value=true;
          //清空表单数据
          regFrom.value={};
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
/*定义一个返回的响应方法*/
const back = () => {
  loginShow.value =true;
  regShow.value=false;
}
const SignUpNow = ()=>{
  loginShow.value = false;
  regShow.value = true;
}

</script>
<style>
.mainDiv{
  height: 100vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  background-image: url('../assets/img/yu.jpg');
  /* animation: frams 20s infinite; */
}
</style>